<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>photoSwipe</title>

</head>
<style>
    #gallery{
        max-width:100%!important;
        width: 100% !important;
        height: 100%!important;
        position: absolute!important;
        left: 0!important;
        top:0!important;
    }
    #gallery .ug-slider-wrapper{
        width: 100% !important;
    }
    #gallery .ug-item-wrapper img{
        width: auto !important;
        height: auto !important;
    }
</style>
<body>
<div style="background-color:#000; width: 100%; height: 100%; position: fixed;left: 0; top: 0;">
    <div id="gallery" style="display:none;">

        <img alt="Preview Image 1"
             src="tmp/food.png"
             data-image="tmp/food.png"
             data-description="Preview Image 1 Description">
    </div>
</div>

<!--<script src="libs/photoSwipe/photoswipe.js"></script>
<script src="libs/photoSwipe/photoswipe-ui-default.min.js"></script>-->
<link rel="stylesheet" href="libs/unitegallery/css/unite-gallery.css">
<script src="js/jquery.js"></script>
<script src="libs/unitegallery/js/unitegallery.js"></script>
<script src="libs/unitegallery/themes/slider/ug-theme-slider.js"></script>
<script>

    jQuery(document).ready(function(){

        jQuery("#gallery").unitegallery();

    });

</script>
</body>
</html>